import {
  useCallback,
  useEffect,
  useMemo,
  useState,
} from 'react'
import { Drawer, Spin } from 'antd'
import { getProDetailItemApi } from '@/api/pro'

// 一个图表变化尺寸的hook
export const useChartResize = (instance) => {
  useEffect(() => {
    const ChartResize = () => {
      instance.resize()
    }
    window.addEventListener('resize', ChartResize)
    return (() => {
      window.removeEventListener('resize', ChartResize)
    })
  }, [instance])
}
// 详情抽屉
export const useDetailDrawer = () => {
  const [open, setOpen] = useState(false)

  const [detail, setDetail] = useState()

  const [spinning, setSpining] = useState(true)

  const handleDetailOpen = useCallback(async ({ proid }) => {
    setOpen(true)
    setDetail(null)
    try {
      const proDetail = await getProDetailItemApi(proid)
      setSpining(false)
      setDetail(proDetail)
    } catch (error) {
      console.log(error)
    }
  }, [])

  const drawer = useMemo(() => (
    <Drawer title="详情页" placement="right" visible={open} onClose={() => setOpen(false)}>
      <Spin spinning={spinning}>
        <pre>
          {detail && JSON.stringify(detail, null, 2)}
        </pre>
      </Spin>
    </Drawer>
  ))

  return {
    handleDetailOpen,
    drawer,
  }
}
